<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .banner{
            position: relative;
            margin: 100px auto;
            width: 600px;
            height: 220px;
            border: 2px solid #ccc;
            overflow: hidden;
        }
        .banner .img{
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .img:nth-child(1){
            left: 0;
        }
        .img:nth-child(2){
            left: 120px;
        }
        .img:nth-child(3){
            left: 240px;
        }
        .img:nth-child(4){
            left: 360px;
        }
        .img:nth-child(5){
            left: 480px;
        }

    </style>
</head>
<body>
    <div class="banner">
            <img src="image/m1.jpg" alt="" class="img" data-index=0>
            <img src="image/m2.jpg" alt="" class="img" data-index=1>
            <img src="image/m3.jpg" alt="" class="img" data-index=2>
            <img src="image/m4.jpg" alt="" class="img" data-index=3>
            <img src="image/m5.jpg" alt="" class="img" data-index=4>
    </div>


    <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var leftArr = [0, 60, 120, 180, 240];
        var rightArr = [0, 360, 420, 480, 540];
        var startArr = [0, 120, 240, 360, 480];
        var $imgs = $('.img');
        // 鼠标进入位置改变
        $imgs.mouseenter(function () {
            var target = event.target;           
            var index = target.dataset.index;
            // 绑定动画
            for (var i = 0; i < leftArr.length; i++) {
                    $imgs.eq(i).stop().animate({
                    // 判断图片移动方向
                    left: i > index ? rightArr[i] : leftArr[i]
                }, 300, "swing")
            }
        })
        // 鼠标离开图片位置回归
        $('.banner').mouseleave(function () {
            for (var i = 0; i < leftArr.length; i++) {
                $imgs.eq(i).stop().animate({
                    left: startArr[i]
                }, 300, "swing")
            }
        })
    </script>
</body>
</html>